<template>
  <ant-modal
    modalWidth="1000"
    modalHeight="600"
    :visible="open"
    :modal-title="formTitle"
    :adjust-size="true"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      <a-row :gutter="32">
        <a-col :span="8">
          <a-form-model-item label="产品大类" prop="categoryId">
            <a-tree-select
              v-model="form.categoryId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="categoryIdOptions"
              placeholder="请选择"
              :replaceFields="{ children: 'children', title: 'categoryName', key: 'id', value: 'id' }"
              tree-default-expand-all
              @change="treeChange"
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="产品编号" prop="productCode">
            <a-input v-model="form.productCode" placeholder="产品编号自动生成" :disabled='true'/>
          </a-form-model-item>
        </a-col>
        
        <a-col :span="8" >
              <a-form-model-item label="库存计算" prop="isClear">
                <a-radio-group v-model="form.inventoryFlag" button-style="solid">
                  <a-radio-button
                    v-for="(dict, index) in inventoryOptions"
                    :key="index"
                    :value="dict.dictValue"
                  >
                    {{ dict.dictLabel }}
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
      </a-row>
      <a-tabs v-model="currentTab" @change="handleTabChange">
        <a-tab-pane key='first' >
        <span slot="tab" :style="{ fontSize: '10px' }">
          基本信息
        </span>
          <a-row :gutter="32">
          <a-col :span="12">
            <a-form-model-item label="助记码" prop="mnemonicCode">
              <a-input v-model="form.mnemonicCode" placeholder="助记码自动生成" :disabled='true'/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="默认仓库" prop="warehouseId">
              <a-select
                placeholder="请选择默认仓库库"
                v-model="form.warehouseId"
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body
                }
              "
                style="width: 100%"
                allow-clear>
                <a-select-option v-for="(d, index) in warehouseList" :key="index" :value="d.id">{{ d.warehouseName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
            <a-col :span="12">
              <a-form-model-item label="品牌" prop="brand">
                <a-input v-model="form.brand" placeholder="请输入品牌" @change='genMnemonicCode'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="颜色" prop="color">
                <a-input v-model="form.color" placeholder="请输入颜色" @change='genMnemonicCode'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="长" prop="specLength">
                <a-input-number v-model="form.specLength" :min="0" style="width: 100%" @change='genSpec' />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="宽" prop="specWidth">
                <a-input-number v-model="form.specWidth" :min="0" style="width: 100%" @change='genSpec'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="厚" prop="specHeight">
                <a-input-number v-model="form.specHeight" :min="0" style="width: 100%" @change='genSpec'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="规格" prop="spec">
                <a-input v-model="form.spec"  style="width: 100%" :disabled='true'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="型号" prop="model">
                <a-input v-model="form.model" placeholder="请输入型号" @change='genMnemonicCode'/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="预警库存" prop="warnStock">
                <a-input-number v-model="form.warnStock" :min="0" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key='second'>
        <span slot="tab" :style="{ fontSize: '10px' }">
          单位及价格
        </span>
          <a-row :gutter="32">
            <a-col :span='24'>
              <advance-table
                :columns="unitColumns"
                :data-source="unitData"
                rowKey="id"
                size="middle"
                tableKey="system-role-SysRoleIndex-table"
                :pagination="false">

                        <span slot="unitNameSlot" slot-scope="{text,record}">
              <a-input placeholder="请输入" v-model="record.unitName" />
            </span>
                <span slot="convertRatioSlot" slot-scope="{text,record}"  >
              <a-input type='number' placeholder="请输入" v-model="record.convertRatio" v-if='record.type!=1' />
                  <span v-else>{{record.convertRatio}}</span>

            </span>
                <span slot="salePriceSlot" slot-scope="{text,record}">
              <a-input type='number' placeholder="请输入" v-model="record.salePrice" />
            </span>
                <span slot="purchasesPriceSlot" slot-scope="{text,record}">
              <a-input type='number' placeholder="请输入" v-model="record.purchasesPrice" />
            </span>
                <span slot="saleDeductSlot" slot-scope="{text,record}">
              <a-input type='number' placeholder="请输入" v-model="record.saleDeduct" />
            </span>
                <span slot="installDeductSlot" slot-scope="{text,record}">
              <a-input type='number' placeholder="请输入" v-model="record.installDeduct" />
            </span>

               <span slot="defaultWarehousingUnitSlot" slot-scope="{text,record}">
                 <a-checkbox v-model="record.defaultWarehousingUnit" @change='clickWarehousingUnit(record)'/>
            </span>
                  <span slot="defaultOutboundUnitSlot" slot-scope="{text,record}">
                 <a-checkbox v-model="record.defaultOutboundUnit" @change='clickOutboundUnit(record)'/>
            </span>
              </advance-table>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key='third'>
        <span slot="tab" :style="{ fontSize: '10px' }">
          备用信息
        </span>
        </a-tab-pane>
      </a-tabs>
    </a-form-model>

    <template slot="footer">
      <a-button :disabled="disabled" @click="cancel">
        取消
      </a-button>
      <a-button type="primary" :disabled="disabled" @click="submitForm(true)">
        保存
      </a-button>
    </template>
  </ant-modal>
</template>
<script>
import BizProductAddForm from './BizProductForm'
export default {
  ...BizProductAddForm,
}
</script>
